@charset "UTF-8";
@import "./common.scss";
@import "../fonts/iconfont.css";

main{
	.bgTop {
		margin-top: -0.2vw;
		height: 19.5vw;
		background-image: url(../img/glBg.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.navTop{
		margin-top: -0.2vw;
		margin-bottom: 5vw;
		background-color: #08cacc;
		font-size: 0;
		 .turn{
			margin-left: 17vw;
			border-left: 1px solid #069ea0;
			border-right: 1px solid #069ea0;
		 }
		 .turn:hover{
		 	background-color: yellow;	
			cursor: pointer;
		 }
		 .lottery{
			border-left: 1px solid #069ea0;
			border-right: 1px solid #069ea0;
		 }
		 .lottery:hover{
		 	background-color: yellow;	
			cursor: pointer;
		 }
		div{
			display: inline-block;
			padding-right: 3vw;
			h2{
				font-size: 1.4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #ffffff;
				box-shadow: 0vw 0vw 0vw 0vw 
					rgba(187, 173, 106, 0.75);
				padding-top: 1vw;
				padding-left: 3vw;
				padding-bottom: 0.8vw;
			}
			p{
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #ffffff;
				padding-left:3vw;
				padding-bottom: 1vw;
		}
		}
	}
	.content{
		position: relative;
		.imgBox{
			position: absolute;
			left:6vw;
			top: -4.99vw;
			img{
				width: 8vw;
				height: 6vw;
				img{
					width: 100%;
				}
			}
		}
		.btnTop {
			padding: 0 31vw 9vw 35vw;
			display: flex;
			justify-content: space-between;
			button {
				border: 1px solid #8b9a99;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #000000;
				padding: 1vw 2vw;
				background-color: #ffffff;
				border-radius: 10vw;
			}
			button:hover {
				background-color: #12b5a7;
				cursor: pointer;
			}
		}
		.game {
			.itemTop {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding-left: 17.8vw;
				padding-right: 17.8vw;
				margin-bottom: 6vw;
				.itemC {
					background-color: #eaeaea;
					// box-sizing: border-box;
					.gTitle {
						display: flex;
						justify-content: space-between;
						padding: 1vw;
						.gl {
							h1 {
								font-size: 2vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #0a0a0a;
								margin-bottom: 1vw;
							}
							h2 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #737373;
								margin-bottom: 0.2vw;
							}
							h3 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #929292;
								margin-bottom: 0.6vw;
							}
							.line {
								width: 2vw;
								height: 0;
								border-top: 1px solid #808080;
							}
						}
						.gr {
							text-align: right;
							button {
								display: block;
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #ffffff;
								box-shadow: 0vw 0vw 0vw 0vw rgba(9, 65, 60, 0.2);
								margin-bottom: 1.3vw;
								background-color: #11ad9f;
								padding: 0.4vw 1vw;
								border: none;
								border-radius: 10vw;
							}
							button:hover {
								cursor: pointer;
							}
							i {
								font-size: 2vw;
							}
							i:hover {
								cursor: pointer;
							}
						}
					}
					a {
						display: block;
						width: 20vw;
						height: 23vw;
						img {
							width: 100%;
						}
					}
				}
				.itemC:hover {
					transform: scale(1.1);
					transition: 0.3s;
				}
		
				.rightImg {
					position: absolute;
					width: 16vw;
					height: 14vw;
					right: 0;
					top: 5vw;
					img {
						width: 100%;
					}
				}
			}
		
			.itemCenter {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding-left: 17.8vw;
				padding-right: 17.8vw;
				margin-bottom: 6vw;
				.itemC {
					background-color: #eaeaea;
					// box-sizing: border-box;
					.gTitle {
						display: flex;
						justify-content: space-between;
						padding: 1vw;
						.gl {
							h1 {
								font-size: 2vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #0a0a0a;
								margin-bottom: 1vw;
							}
							h2 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #737373;
								margin-bottom: 0.2vw;
							}
							h3 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #929292;
								margin-bottom: 0.6vw;
							}
							.line {
								width: 2vw;
								height: 0;
								border-top: 1px solid #808080;
							}
						}
						.gr {
							text-align: right;
							button {
								display: block;
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #ffffff;
								box-shadow: 0vw 0vw 0vw 0vw rgba(9, 65, 60, 0.2);
								margin-bottom: 1.3vw;
								background-color: #11ad9f;
								padding: 0.4vw 1vw;
								border: none;
								border-radius: 10vw;
							}
							button:hover {
								cursor: pointer;
							}
							i {
								font-size: 2vw;
							}
							i:hover {
								cursor: pointer;
							}
						}
					}
					a {
						display: block;
						width: 20vw;
						height: 23vw;
						img {
							width: 100%;
						}
					}
				}
				.itemC:hover {
					transform: scale(1.1);
					transition: 0.3s;
				}
		
				.leftImg {
					position: absolute;
					width: 15vw;
					height: 15vw;
					left: 0;
					bottom: -2vw;
					img {
						width: 100%;
					}
				}
			}
		
			.itemBottom {
				display: flex;
				justify-content: space-between;
				padding-left: 17.8vw;
				padding-right: 17.8vw;
				margin-bottom: 5vw;
				.itemC {
					background-color: #eaeaea;
					// box-sizing: border-box;
					.gTitle {
						display: flex;
						justify-content: space-between;
						padding: 1vw;
						.gl {
							h1 {
								font-size: 2vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #0a0a0a;
								margin-bottom: 1vw;
							}
							h2 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #737373;
								margin-bottom: 0.2vw;
							}
							h3 {
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #929292;
								margin-bottom: 0.6vw;
							}
							.line {
								width: 2vw;
								height: 0;
								border-top: 1px solid #808080;
							}
						}
						.gr {
							text-align: right;
							button {
								display: block;
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #ffffff;
								box-shadow: 0vw 0vw 0vw 0vw rgba(9, 65, 60, 0.2);
								margin-bottom: 1.3vw;
								background-color: #11ad9f;
								padding: 0.4vw 1vw;
								border: none;
								border-radius: 10vw;
							}
							button:hover {
								cursor: pointer;
							}
							i {
								font-size: 2vw;
							}
							i:hover {
								cursor: pointer;
							}
						}
					}
					a {
						display: block;
						width: 20vw;
						height: 23vw;
						img {
							width: 100%;
						}
					}
				}
				.itemC:hover {
					transform: scale(1.1);
					transition: 0.3s;
				}
			}
		}
		
		.btnBottom {
			display: flex;
			justify-content: space-between;
			padding-left: 37vw;
			padding-right: 38vw;
			margin-bottom: -0.5vw;
			.leftA {
				button {
					font-size: 2vw;
					color: #6d6d6d;
					width: 3vw;
					height: 3vw;
					border-radius: 10vw;
					border: 1px solid #93a1a0;
				}
				button:hover {
					cursor: pointer;
				}
			}
			.btnBox {
				display: flex;
				justify-content: space-between;
				width: 14vw;
				margin: 0 1vw;
				border: 1px solid #93a1a0;
				padding-left: 2vw;
				padding-right: 2vw;
				border-radius: 10vw;
				height: 3vw;
				button {
					border: none;
					font-size: 1.3vw;
					font-weight: normal;
					line-height: 3vw;
					letter-spacing: 0vw;
					color: #000000;
					background-color: #FFFFFF;
				}
				button:hover {
					cursor: pointer;
					color: #08cacc;
				}
			}
		
			.rightA {
				button {
					font-size: 2vw;
					color: #6d6d6d;
					width: 3vw;
					height: 3vw;
					border-radius: 10vw;
					border: 1px solid #93a1a0;
				}
				button:hover {
					cursor: pointer;
				}
			}
		}
	}
}